<!--
  ~ MIT License
  ~
  ~ Copyright (c) 2021-2022 yangrunkang
  ~
  ~ Author: yangrunkang
  ~ Email: yangrunkang53@gmail.com
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~ of this software and associated documentation files (the "Software"), to deal
  ~ in the Software without restriction, including without limitation the rights
  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~ copies of the Software, and to permit persons to whom the Software is
  ~ furnished to do so, subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~ SOFTWARE.
  -->


<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="social_box(url,tag,targetId,title)">
        <div class="card card-body shadow-sm border-bottom border-2 border-top-0 border-start border-end-0 p-2 mb-2">
            <div>
                <div class="text-black-50 border-bottom mb-1 pt-0">分享[[${tag}]]</div>
<!--                <div class="mb-1">-->
<!--                    &lt;!&ndash;分享到linkedin&ndash;&gt;-->
<!--                    <a  class="cv-link"-->
<!--                        th:href="'https://www.linkedin.com/shareArticle?mini=true&url=https://www.upupor.com/'+ ${url} +${targetId}" target="_blank" rel="noopener">-->
<!--                        <img th:data-src="${ossStatic} + @{/system/LinkedIn.png}" style="width: 20px; height: 20px" class="lazyload" /> 分享到 领英-->
<!--                    </a>-->
<!--                </div>-->
                <div class="mb-1">
                    <!--分享到weibo-->
                    <a class="cv-link"
                       th:href="'http://service.weibo.com/share/share.php?url=https://www.upupor.com/' + ${url}
                                    +${targetId}+'&title='+${title}+'&appkey=2178125307&ralateUid=7389727164'"
                       target="_blank" rel="noopener">
                        <img th:data-src="${ossStatic} + @{/system/weibo.png}" style="width: 20px; height: 20px" class="lazyload" /> 分享到 微博
                    </a>
                </div>
                <div class="mb-1">
                    <!--分享到 QQ 空间-->
                    <a class="cv-link"
                       th:href="'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.upupor.com/'+ ${url}
                                    +${targetId}+'&title='+${title}"
                       target="_blank" rel="noopener">
                        <img th:data-src="${ossStatic} + @{/system/qq_zone.png}" style="width: 20px; height: 20px" class="lazyload" /> 分享到 QQ空间
                    </a>
                </div>
                <div class="mb-1">
                    <!--分享到facebook-->
                    <a class="cv-link" th:href="'https://www.facebook.com/sharer.php?title='
                                    +${title}
                                    +'&u=https://www.upupor.com/'+ ${url}+${targetId}" target="_blank">
                        <img th:data-src="${ossStatic} + @{/system/facebook.png}" style="width: 20px; height: 20px" class="lazyload" /> 分享到 Facebook
                    </a>
                </div>
                <div class="mb-1">
                    <!--分享到twitter-->
                    <a class="cv-link" th:href="'https://twitter.com/share?text=' + ${title} + '&url=https://www.upupor.com/'+ ${url} + ${targetId}" target="_blank" rel="noopener">
                        <img th:data-src="${ossStatic} + @{/system/twitter.png}" style="width: 20px; height: 20px" class="lazyload" /> 分享到 Twitter
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>








